<template>  
    <el-main>
        <el-form :model="ComplaintForm" size="mini" label-width="80px">
            <el-row>
                <el-col :span="6">
                    <el-form-item  label="编号:">
                        <el-input v-model="ComplaintForm.ComplaintId" placeholder="请输入投诉信息编号..." @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="1">
                <el-button class="searchBtn" style="margin-left:0"  size="mini" icon="el-icon-search">查询</el-button>
                </el-col>
                <el-button @click="AddComplaint"   style="margin-right:-750px" class="newBtn" type="primary" size="mini" icon="el-icon-circle-plus" >添加投诉信息</el-button>
            </el-row>
        </el-form>
        <el-table  size="mini" :data="tableData" :height="tableHeight" border style="width: 100%">
                 <el-table-column type="selection"></el-table-column>
            <el-table-column prop="ComplaintId" label="投诉信息编号" ></el-table-column>
            <el-table-column prop="CTitle" label="投诉标题"></el-table-column>
            <el-table-column prop="OwnerName" label="投诉人"></el-table-column>
            <el-table-column prop="CTime" label="投诉时间"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                <el-button @click.native.prevent="ComplaintDetail(scope.$index,scope.row)"  size="mini" style="margin-left:-5px">详情</el-button>
                    <el-button @click.native.prevent="EditComplaint(scope.$index,scope.row)" size="mini" style="margin-left:-5px">修改</el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" size="mini" style="margin-left:-5px">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="this.tableData.length">
        </el-pagination>
        <!-- 新增对话框-->
        <el-dialog title="投诉登记" :visible.sync="visible" width="50%" align="center" >
            <el-form ref="AddComplaint" :model="AddComplaintForm" size="mini" :inline="true" style="margin-bottom:-10px">
            <el-form-item prop="CTitle" label="投诉标题" label-width="130px" >
                    <el-input v-model="AddComplaintForm.CTitle" placeholder="投诉标题" maxlength="10" show-word-limit ></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="投诉人" label-width="130px">
                    <el-input v-model="AddComplaintForm.OwnerName" placeholder="投诉人" ></el-input>
                </el-form-item >
                <el-form-item prop="CContent" label="投诉内容" label-width="130px" size="large">
                    <el-input  type="textarea"  resize="none" v-model="AddComplaintForm.CContent" placeholder="投诉内容" :rows="8" style="width:512px "></el-input>
                </el-form-item>
            <el-form-item style="margin-top:10px ">
                <el-button @click="visible=false" style="margin-right:50px" size="large">取 消</el-button>
                <el-button type="primary" @click="visible= false" size="large" style="margin-right:-50px">确 定</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="投诉信息详情" :visible.sync="visible1" width="50%" align="center" >
            <el-form ref="ComplaintDetail" :model="ComplaintDetailForm" size="mini" :inline="true" style="margin-bottom:-10px">
            <el-form-item prop="CTitle" label="投诉标题" label-width="130px" >
                    <el-input v-model="ComplaintDetailForm.CTitle" placeholder="投诉标题" maxlength="10" show-word-limit disabled></el-input>
                </el-form-item>
                <el-form-item prop="ComplaintId" label="投诉信息编号" label-width="130px">
                    <el-input v-model="ComplaintDetailForm.ComplaintId" placeholder="投诉人" disabled ></el-input>
                </el-form-item >
                <el-form-item prop="CContent" label="投诉内容" label-width="130px" size="large">
                    <el-input  type="textarea"  resize="none" v-model="ComplaintDetailForm.CContent" placeholder="投诉内容" :rows="8" style="width:512px " disabled></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="投诉人" label-width="130px">
                    <el-input v-model="ComplaintDetailForm.OwnerName" placeholder="投诉人" disabled ></el-input>
                </el-form-item >
                <el-form-item prop="CTime" label="投诉时间" label-width="130px">
                    <el-input v-model="ComplaintDetailForm.CTime" placeholder="投诉人" disabled ></el-input>
                </el-form-item >
            <el-form-item style="margin-top:10px ">
                <el-button @click="visible=false" style="margin-right:50px" size="large">取 消</el-button>
                <el-button type="primary" @click="visible= false" size="large" style="margin-right:-50px">确 定</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="修改投诉信息" :visible.sync="visible2" width="50%" align="center" >
            <el-form ref="EditComplaint" :model="EditComplaintForm" size="mini" :inline="true" style="margin-bottom:-10px">
            <el-form-item prop="CTitle" label="投诉标题" label-width="130px" >
                    <el-input v-model="EditComplaintForm.CTitle" placeholder="投诉标题" maxlength="10" show-word-limit ></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="投诉人" label-width="130px">
                    <el-input v-model="EditComplaintForm.OwnerName" placeholder="投诉人" ></el-input>
                </el-form-item >
                <el-form-item prop="CContent" label="投诉内容" label-width="130px" size="large">
                    <el-input  type="textarea"  resize="none" v-model="EditComplaintForm.CContent" placeholder="投诉内容" :rows="8" style="width:512px "></el-input>
                </el-form-item>
            <el-form-item style="margin-top:10px ">
                <el-button @click="visible=false" style="margin-right:50px" size="large">取 消</el-button>
                <el-button type="primary" @click="visible= false" size="large" style="margin-right:-50px">确 定</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
    </el-main>
</template>
<script>
export default {
    data(){
        
        return{
            currentPage:1,
            pageSize:10,
           
            userForm:{
                userName:""
            },
            ComplaintForm:{
                ComplaintId:""
            },
            tableHeight: window.innerHeight,
            tableData:[
                {
                    ComplaintId: "00000001",
                    CTitle: "怎么没电了",
                    CContent: "包租婆怎么没电了？",
                    CTime:"2020-08-08",
                    OwnerName:"小王"
                },
            ],
            visible:false,
            visible1:false,
            visible2:false,
            AddComplaintForm:{
                ComplaintId: "",
                    CTitle: "",
                    CContent: "",
                    CTime:"",
                    OwnerName:""
            },
            ComplaintDetailForm:{
                    ComplaintId: "",
                    CTitle: "",
                    CContent: "",
                    CTime:"",
                    OwnerName:""
            },
            EditComplaintForm:{
                    ComplaintId: "",
                    CTitle: "",
                    CContent: "",
                    CTime:"",
                    OwnerName:""
            }
            ,
            addUserForm:{
                userName:' ',
                address:' ',
            },
            rules:{
                userName:[
                {
                    required:true,
                    trigger: "change",
                    message: "请输入用户名"
                }
                ],
                address: [
                {
                    required: true,
                    trigger: "change",
                    message: "请输入地址"
                }
                ]
            }
        };
    },methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
        },
        //添加用户
        AddComplaint(){
            //调用表单清空方法
            this.resetForm('AddComplaint');
            this.visible=true;
        },
        ComplaintDetail(index,row){
            this.visible1=true;
            this.ComplaintDetailForm=Object.assign({},row)
        },
        EditComplaint(index,row){
            this.visible2=true;
            this.EditComplaintForm=Object.assign({},row)
        },
        //编辑用户
        editUser(row){
            console.log(row);
        },
        //删除用户
        deleteUser(row){
            console.log(row);
        },
        //清空表单数据
        resetForm(formName){
            if(this.$refs[formName]){
                this.$refs[formName].resetFields();
            }
        },
        comfirmBtn(){
            let _this=this;
            _this.$refs.addUser.validate(valid=>{
                if(valid){
                    _this.visible=false;
                }
            })
        },
    },
    
    
    //该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
// 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
// 这个操作都应该放进Vue.nextTick()的回调函数中
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 200; //后面的50：根据需求空出的高度，自行调整
        });
    }
};
</script>
<style lang="scss" scoped>
.searchBtn{
    margin-left: 30px;
}
.el-main{
    padding-top: 5px !important;
}
</style>